<template>
  <el-dialog :visible.sync="dialogVisible" :before-close="cancel" width="50%" :close-on-press-escape=false
             :close-on-click-modal=false>
    <template slot="title">
      <span >权限设置</span>
    </template>
    <el-form
     ref="refForm"
      :disabled="loading"
      :rules="refRule"
      :model="form" class="demo-form-inline">
       <el-form-item label="黑名单群组:" prop="level">
        <span>{{rowData.levelName}}</span>
      </el-form-item>
      <el-form-item label="权限:"  class="relative">
         <el-table :data="blackAthourityList" class="table-box">
          <el-table-column prop="behavior" label="行为" align="center" width="120" ></el-table-column>
          <el-table-column prop="monitor" label="监控操作" align="center">
            <template slot-scope="{row}">
              <div v-if="row.monitorId!=400&&row.behaviorId!=5">
                <el-checkbox v-model="row.monitorChecked" >{{row.monitor}}</el-checkbox>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="block" label="封锁操作"  width="230">
             <template slot-scope="{row}">
                 <div v-if="row.behaviorId==3" >
                   <el-checkbox v-model="row.blockList[0].blockChecked" :disabled="row.blockList[1].blockChecked" >{{row.blockList[0].block}}</el-checkbox>
                   <div style="display:flex;justify-content:center;" >
                      <el-checkbox v-model="row.blockList[1].blockChecked" :disabled="row.blockList[0].blockChecked">{{row.blockList[1].block}}</el-checkbox>
                      <div v-for="(val,i) in row.blockList" :key="i" >
                        <div v-if="val.optionList&&val.blockId==302" >
                          <el-select  v-model="form.withdrawUserLevelId" :disabled="!val.blockChecked">
                              <el-option
                              v-for="item in val.optionList"
                              :key="item.levelId"
                              :label="item.name"
                              :value="item.levelId"
                              >
                              </el-option>
                          </el-select>
                        </div>
                      </div>
                   </div>

                 </div>
                  <div v-else-if="row.behaviorId==5" >
                   <div v-for="(val,i) in row.blockList" :key="i"  style="display:flex;justify-content:center;">
                    <el-checkbox v-model="val.blockChecked" >{{val.block}}</el-checkbox>
                    <div v-if="val.optionList&&val.blockId==500" >
                      <el-select  v-model="form.rechargeUserLevelId" :disabled="!val.blockChecked">
                          <el-option
                          v-for="item in val.optionList"
                          :key="item.levelId"
                          :label="item.name"
                          :value="item.levelId"
                          >
                          </el-option>
                      </el-select>
                    </div>
                 </div>
                  </div>
                  <div v-else>
                     <div v-for="(val,i) in row.blockList" :key="i"  >
                      <el-checkbox v-model="val.blockChecked" >{{val.block}}</el-checkbox>
                     </div>
                  </div>

               </div>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="备注:" prop="remark">
        <el-col :span="17">
          <el-input placeholder="请输入备注" type="textarea" v-model.trim="form.remark" maxlength="22"></el-input>
        </el-col>
      </el-form-item>
      <div style="text-align:right">
        <el-button class="filter-item"
                   @click="cancel">取消
        </el-button>
        <el-button class="filter-item" type="primary"
                   @click="toSave">确认
        </el-button>
      </div>
    </el-form>
  </el-dialog>
</template>
<script>
import { form, grid, factory } from '@/build';
import { blackListLevalUpdatePermission } from '@/services/api/risk';

export default {
  name: 'permision-setttings-dialog',
  mixins: [form, grid, factory],
  props: {
    dialogVisible: {
      required: true,
    },
    rowData: {
      required: true,
    },
    type: { // 可选字段，有默认值 默认只看举报详情
      default: 1,
    },

  },
  data() {
    return {
      inValidateUsers: [],
      form: {
        levelId: '',
        blackMenuList: '',
        withdrawUserLevelId: null,
        rechargeUserLevelId: null,
        remark: '',
      },
      refRule: {
        remark: [
          { required: true, message: '备注不能为空' },
        ],
      },
      blackAthourityList: [
        {
          behaviorId: 1,
          behavior: '注册',
          monitorId: 100,
          monitor: '监控注册',
          monitorChecked: false,
          blockList: [
            {
              blockId: 101,
              block: '禁止注册',
              blockChecked: false,
            },
          ],

        },
        {
          behaviorId: 2,
          behavior: '登录',
          monitorId: 200,
          monitor: '监控登录',
          monitorChecked: false,
          blockList: [
            {
              blockId: 201,
              block: '禁止登录',
              blockChecked: false,
            },
          ],

        },
        {
          behaviorId: 3,
          behavior: '提现',
          monitorId: 300,
          monitor: '监控提现',
          monitorChecked: false,
          blockList: [
            {
              blockId: 301,
              block: '禁止提现',
              blockChecked: false,
            },
            {
              blockId: 302,
              block: '提现分层',
              blockChecked: false,
              optionList: this.$store.state.risk.userLevelList,
            },
          ],
        },
        {
          behaviorId: 4,
          behavior: '发放返水',
          monitorId: 400,
          monitor: '监控返水',
          monitorChecked: false,
          blockList: [
            {
              blockId: 401,
              block: '禁止返水',
              blockChecked: false,
            },
          ],

        },
        {
          behaviorId: 5,
          behavior: '充值',
          monitorId: null,
          monitor: 'null',
          monitorChecked: false,
          blockList: [
            {
              blockId: 500,
              block: '充值分层',
              blockChecked: false,
              optionList: this.$store.state.risk.userLevelList,
            },
          ],


        },
      ],


    };
  },

  methods: {
    cancel() {
      // this.resetForm('form');
      this.$emit('cancel');
    },
    toSave() {
      this.$refs.refForm.validate((valid) => {
        if (valid) {
          this.form.blackMenuList = [],
          this.blackAthourityList.forEach((item) => {
            if (item.monitorChecked) {
              this.form.blackMenuList.push(item.monitorId);
            }

            item.blockList.forEach((val) => {
              if (item.blockId == 302) {
                if (val.blockChecked && this.form.withdrawUserLevelId) {
                  this.form.blackMenuList.push(val.blockId);
                }
              }
              if (item.blockId == 500) {
                if (val.blockChecked && this.form.rechargeUserLevelId) {
                  this.form.blackMenuList.push(val.blockId);
                }
              } else if (val.blockChecked) {
                this.form.blackMenuList.push(val.blockId);
              }
            });
          });
          // console.log(`权限列表${JSON.stringify(this.form.blackMenuList)}`);
          this.doSave({ action: 'updatePermission' });
        }
      });
    },
  },
  mounted() {
    // this.form = this.rowData;
    this.form.levelId = this.rowData.id;
    this.form.remark = this.rowData.remark;
    this.form.blackMenuList = eval(this.rowData.blackMenuList) || [];
    this.form.withdrawUserLevelId = this.rowData.withdrawUserLevelId;
    this.form.rechargeUserLevelId = this.rowData.rechargeUserLevelId;

    // if (this.form.withdrawUserLevelId) {
    //   this.blackAthourityList[2].blockList[1].blockChecked = true;
    // }
    // if (this.form.rechargeUserLevelId) {
    //   this.blackAthourityList[4].blockList[0].blockChecked = true;
    // }
    if (this.form.blackMenuList) {
      this.form.blackMenuList.forEach((value) => {
        this.blackAthourityList.forEach((item) => {
          if (item.monitorId == value) {
            item.monitorChecked = true;
          }
          item.blockList.forEach((val) => {
            if (val.blockId == value) {
              val.blockChecked = true;
            }
          });
        });
      });
    } else {
      this.rowData.blackMenuList = [];
    }

    this.bindSave(blackListLevalUpdatePermission, 'updatePermission', 'form', {// 修改等级权限
      beforeSend: (data) => {
        data.blackMenuList = data.blackMenuList.join(',');
        return data;
      },
      callback: ([result, data]) => {
        if (!result) return;
        this.$emit('cancel');
        this.$parent.getAll();
        // console.log(`sameip==${JSON.stringify(data)}`);
      },
    });
  },

};
</script>

<style lang="scss" scoped>
  // /deep/ .el-input,.el-textarea{width:auto !important}
  /deep/ .el-table{width:90%}
  /deep/ .relative{position: relative;top:10px}
  /deep/ .table-box{position:relative;top:-7px}
  /deep/ .el-checkbox{margin-right:10px;}
</style>
